/* Product Section Styling */
 .product-section {
    padding: 3rem 0; /* Add vertical padding */
    background-color: green !important; /* white background */
    margin-top: 0%;

  }
  
 /* Section Header Styling */
.product-section h1 {
    margin-top: 0 !important;
    margin-bottom: 1rem; /* Add spacing below the header */
    text-align: center; /* Center-align the text */
    font-weight: bold; /* Make the text bold */
    font-size: 3rem; /* Increase font size */
  }
  
  /* Style for "Our" text */
  .our-text {
    color: gold !important; /* Keep "Our" text green */
  }
  
  /* Style for "Products" text */
  .products-text {
    color: white !important; /* Change "Products" text to yellow */
  }
  
  .product-section p {
    color: white !important; /* Apply forestgreen color */
    margin-bottom: 1rem !important; /* Remove spacing below the paragraph */
    text-align: center; /* Center-align the text */
    font-size: 1.2rem; /* Increase font size */
  }
  
  /* Product Grid Styling - Display 4 cards at a time */
  .product-grid {
    display: flex;
    overflow-x: hidden; /* Hide overflow */
    justify-content: center; /* Center the products */
    gap: 1.5rem;
    width: 100%; /* Full width */
    max-width: 100%; /* Limit grid width */
  }
  
  /* Product Card */
  .product-card {
    position: relative;
    background-color: transparent;
    border: 1px solid darkgreen;
    border-radius: 10px;
    overflow: hidden;
    width: 250px; /* Fixed card width */
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column; /* Align content vertically */
    justify-content: space-between; /* Ensure the button stays at the bottom */
  }
  
  /* Hide excess product cards */
  .product-card:nth-child(n + 5) {
    display: none; /* Hide cards beyond the first 4 */
  }
  
  /* Product Image */
  .product-card img {
    width: 100%;
    height: 300px; /* Set a fixed height to ensure all images are the same size */
    object-fit: cover; /* Ensures images fit the space without distortion */
    border-radius: 10px;
    margin-bottom: 1rem; /* Add spacing below the image */
  }
  
  /* Image Hover Effect */
  .product-image:hover img {
    opacity: 0.8; /* Slight fade effect on hover */
  }
  
  /* Product Actions (Icons) */
  .product-actions {
    position: absolute; /* Position icons within the card */
    top: 10px; /* Distance from the top */
    right: 10px; /* Distance from the right */
    display: flex; /* Use flexbox for icons */
    flex-direction: column; /* Stack icons vertically */
    opacity: 0; /* Hide icons initially */
    transition: opacity 0.3s ease-in-out; /* Smooth transition for visibility */
  }
  
  /* Action Icons Visibility on Hover */
  .product-image:hover .product-actions {
    opacity: 1; /* Show icons on hover */
  }
  
  /* Action Icons Styling */
  .product-actions i {
    font-size: 1.2rem; /* Set icon size */
    margin-bottom: 5px; /* Add space between icons */
    cursor: pointer; /* Add pointer cursor */
  }
  
  /* Active Wishlist and Cart Icons */
  .product-actions .active {
    color: red; /* Change color to red when active */
  }
  
  /* Carousel Buttons Styling */
  .carousel-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .carousel-button {
    background: white;
    border: 1px solid white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: background-color 0.3s ease-in-out;
  }
  
  /* Button hover effect */
  .carousel-button:hover {
    background-color: gold;
  }
  
  /* Modify the "Buy It Now" Button */
  .buy-now-btn {
    background-color: gold; /* Green background */
    border-color: gold; /* Green border */
    color: green; /* White text */
    display: inline-block; /* Make buttons appear in one line */
    margin: 5px; /* Add space between buttons */
    border-radius: 25px; /* Circular edges */
  }
  
  .buy-now-btn:hover {
    background-color: white; /* Darker green when hovered */
    border-color: white; /* Darker green border when hovered */
    color: green;
  }
  
  
  /* Product Card Heading (h3) - Reduce font size */
  .product-info h3 {
    font-size: 1.4rem; /* Reduced font size for title */
    color: white;
    margin-bottom: 1rem; /* Add spacing below the title */
  }
  
  /* Increase gap between product description, price, and the "Buy It Now" button */
  .product-info p {
    margin-bottom: 1rem !important; /* Increase gap between price and button */
  }
  
  .product-info .product-price {
    color: gold !important; /* Green color for the price */
    margin-bottom: 10px; /* Adds space between price and the button */
  }
  
  /* Align all Buy It Now buttons */
  .product-info .buy-now-btn {
    display: inline-block;
    margin-top: auto; /* Push button to the bottom of the card */
  }

  /* Animation for sliding in */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideIn 1s ease-out forwards;
}

/* Delay for each card */
.product-card:nth-child(1) { animation-delay: 0s; }
.product-card:nth-child(2) { animation-delay: 2s; }
.product-card:nth-child(3) { animation-delay: 4s; }
.product-card:nth-child(4) { animation-delay: 6s; }
.product-card:nth-child(5) { animation-delay: 8s; }
.product-card:nth-child(6) { animation-delay: 10s; }

/* Hover effect */
.product-card:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}